import type { PlusColumn, FieldValues } from "plus-pro-components";
import type { FormRules } from "element-plus";
import { ref } from "vue";
import { useTable } from "plus-pro-components";
import $request from "./request";

// 表单数据
export const formData = ref<FieldValues>();

export const { buttons } = useTable();
export const tableColumns: PlusColumn[] = [
  {
    label: "角色名称",
    minWidth: 200,
    prop: "roleName",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "角色标识",
    width: 150,
    prop: "roleName",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "备注",
    width: 300,
    valueType: "textarea",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    prop: "remark",
    hideInSearch: true
  },
  {
    label: "状态",
    width: 100,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "启用",
        value: true,
        color: "green"
      },
      {
        label: "停用",
        value: false,
        color: "red"
      }
    ],
    hideInTable: true
  },
  {
    label: "状态",
    width: 100,
    prop: "status",
    editable: true,
    hideInSearch: true
  }
];

// 按钮
buttons.value = [
  {
    text: "编辑",
    code: "update",
    props: { type: "primary", plain: true }
  },
  {
    text: "权限",
    code: "menu",
    props: { type: "warning", plain: true }
  },
  {
    text: "删除",
    code: "delete",
    props: { type: "danger", plain: true },
    confirm: {
      title: "系统提示",
      message: ({ row }) => {
        return `确定删除角色“${row.roleName}”吗？`;
      }
    }
  }
];

// 表单数据转换
export const formDataTransform: FormDataTransform = {
  // 初始化表单数据
  async initForm(options) {
    if (options?.id) {
      // 编辑
      const data = await $request.get.detail(options.id as number);
      return {
        ...data
      };
    } else {
      // 添加
      return {
        status: true,
        sort: 99
      };
    }
  },
  // 转化准备提交的表单数据
  transForm(options, formData) {
    return {
      ...formData
    };
  }
};

// 获取表单信息
export const getFormColumns = (_options: FormModalOptions): PlusColumn[] => {
  return [
    {
      label: "角色名称",
      prop: "roleName",
      valueType: "input",
      colProps: { span: 24 }
    },
    {
      label: "角色标识",
      prop: "code",
      valueType: "input",
      colProps: { span: 24 }
    },
    {
      label: "备注",
      prop: "remark",
      valueType: "textarea",
      colProps: { span: 24 }
    },
    {
      label: "状态",
      prop: "status",
      valueType: "radio",
      options: [
        {
          label: "启用",
          value: true
        },
        {
          label: "禁用",
          value: false
        }
      ]
    },
    {
      label: "排序",
      prop: "sort",
      tooltip: "序号越小排名越靠前",
      valueType: "input-number"
    }
  ];
};

// 验证
export const formRules: FormRules = {
  roleName: [
    {
      required: true,
      message: "请输入角色名称",
      trigger: "blur"
    }
  ],
  code: [
    {
      required: true,
      message: "请输入角色标识",
      trigger: "blur"
    }
  ]
};
